<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>课程详情页</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css">
    <script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
    <style>
        .panel {
            margin-bottom: 5px;
        }
    </style>
</head>
<body>
<div class="container">
    <nav class="navbar navbar-default">
        <div class="container-fluid">
            <div class="navbar-header">
                <a class="navbar-brand" href="#">
                    <img alt="Brand">
                </a>
                <p th:text="${course.name}" class="navbar-text">课程名</p>
                <a class="btn btn-success" data-toggle="modal" data-target="#myModal" href="/phisoa/course/comment/add">评价此课程</a>
            </div>
        </div>
    </nav>
    <div class="row">
        <!-- 评价弹窗-->
        <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
            <form class="modal-dialog" action="/phisoa/course/comment/add" method="post" enctype="multipart/form-data">

                <!--<div class="modal-dialog">-->
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;
                        </button>
                        <h4 class="modal-title" id="myModalLabel">发表评论</h4>
                    </div>
                    <div class="modal-body">
                        <input type="text" name="comment">
                        <input type="file" name="pics" multiple>
                        <input type="radio" name="isAnonymous" value="0" checked/>非匿名
                        <input type="radio" name="isAnonymous" value="1"/>匿名
                        <input type="hidden" name="courseId" th:value="${course.id}">
                    </div>

                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                        <button type="submit" class="btn btn-primary">提交更改</button>
                    </div>
                </div><!-- /.modal-content -->
                <!--</div>&lt;!&ndash; /.modal &ndash;&gt;-->
            </form>
        </div>
    </div>
</div>
<div class="container">
    <div class="row">
        <div class="col-sm-4">
            <img class="img-responsive" src="/static/upload/organization/course/default.jpg" alt="...">
        </div>
        <div class="col-sm-3">
            <div class="row">
                <div class="panel panel-default">
                    <div class="panel-body">
                        <p class="lead" th:text="${course.category?.name}">分类</p>
                        <div><label class="label label-info">课程等级：</label>
                            <span th:text="${course.level}">null</span>
                        </div>
                        <div>
                            <label class="label label-info">适合的等级：</label><span th:text="${course.suitable}">null</span>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="panel panel-default">
                    <div class="panel-body">
                        <div class="col-md-6">
                            <a href="#" class="btn">预约试听</a>
                        </div>
                        <div class="col-md-6">
                            <form action="/phisoa/pay/yi" method="post">
                                <input type="hidden" name="courseId" th:value="${course.id}">
                                <button type="submit" class="btn btn-info">购买课程</button>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="panel panel-info">
                    <div class="panel-heading">
                        <h3 class="panel-title">什么玩意</h3>
                    </div>
                    <div class="panel-body">
                        <p class="text">通过缩略图组件扩展 Bootstrap 的 栅格系统，可以很容易地展示栅格样式的图像、视频、文本等内容。</p>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="panel panel-default">
                    <div class="panel-body">
                        <div class="col-sm-6">
                            <label>门店价：</label><s class="text-center text-danger" th:text="${course.price}"></s>
                        </div>
                        <div class="col-sm-6">
                            <label>优惠价：</label><label class="text" th:text="${course.originalPrice}"></label>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="panel panel-default">
                    <div class="panel-body">
                        <a href="#" th:text="'地址：'+${o?.place}">地址：</a>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-sm-5">
            <div class="row">
                <div class="col-sm-3">
                    <img th:src="|/${oPath}${o.logo}|" alt="" class="img-responsive">
                </div>
                <div class="col-sm-9">
                    <div class="panel panel-default">
                        <div class="panel-body text-center" th:text="|联系电话: ${o.phone}|">
                            联系电话:xxxxx
                        </div>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="panel panel-default">
                    <div class="panel-body" style="padding: 40px;">
                        <p th:text="|信誉度:${overview?.creditUltimate}|"></p>
                        <p th:text="|环境:${overview?.environmentUltimate}|"></p>
                        <p th:text="|师资:${overview?.facultyUltimate}|"></p>
                        <p th:text="|效果:${overview?.effectUltimate}|"></p>
                        <p th:text="|满意度:${overview?.satisfactionUltimate}|"></p>
                        <p th:text="|认证等级:${overview?.certificationLevel}|"></p>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="panel panel-default">
                    <div class="panel-body" th:text="|主要培训方向: ${tagNames}|"></div>
                </div>
            </div>
        </div>
    </div>
    <div class="col-sm-5">

    </div>
</div>
<div class="container">
    <div class="row">
        <div class="col-sm-9">
            <div class="row">
                <nav class="navbar navbar-default" role="navigation">
                    <div class="container-fluid">
                        <div>
                            <ul class="nav navbar-nav">
                                <li><a href="#">课程介绍</a></li>
                                <li><a href="#">课程老师</a></li>
                                <li><a href="#">老师作品</a></li>
                                <li><a href="#">官方相册</a></li>
                                <li><a href="#">该机构其它课程</a></li>
                                <li><a href="#">课程评价</a></li>
                            </ul>
                        </div>
                    </div>
                </nav>
            </div>
            <div class="row">
                <ul class="list-group">
                    <li class="list-group-item" th:text="|课程类型: ${course.category?.name}|"></li>
                    <li class="list-group-item">每次上课时长：45分钟</li>
                    <li class="list-group-item">教学环境：环境优雅，宽敞明亮</li>
                    <li class="list-group-item">
                        <span class="badge">★</span>
                        课程价格：叫其他同类课程便宜
                    </li>
                    <li class="list-group-item" th:text="|课程等级: ${course.level}|">课程等级：初级</li>
                    <li class="list-group-item" th:text="|上课形式: ${course.trainingMode}|"></li>
                    <li class="list-group-item" th:text="|适合基础: ${course.suitable}|"></li>
                    <li class="list-group-item" th:text="|课程目标: 兴趣培养|">课程目标: 兴趣培养</li>
                    <li class="list-group-item" th:text="|教师经验: ${lecturer?.experience}|">教师经验：专业书法家、从业十余年</li>
                </ul>
            </div>
            <!-- 课程老师 -->
            <div class="row">
                <div class="panel">
                    <div class="panel-body">
                        课程老师
                    </div>
                </div>
                <div class="col-sm-4">
                    <img class="img-responsive" th:src="|/${lPath}${lecturer.id}/${lecturer.selfie}|" alt="">
                </div>
                <div class="col-sm-8">
                    <p th:text="|姓名: ${lecturer.name}|"></p>
                    <p th:text="|教龄: ${lecturer.seniority}|"></p>
                    <div class="panel panel-default" th:text="${lecturer.resume}">
                    </div>
                </div>
            </div>

            <!--老师作品-->
            <div class="row">
                <div class="col-sm-12">
                    <div class="panel">
                        <div class="panel-body">
                            老师作品
                        </div>
                    </div>
                </div>
                <div class="col-sm-12">
                    <div class="col-sm-3" th:each="pic:${showreels}">
                        <img class="img-responsive" th:src="|/${lPath}${lecturer.id}/${pic}|" alt="">
                    </div>
                </div>
            </div>

            <!-- 官方相册 -->
            <div class="row">
                <div class="panel">
                    <div class="panel-body">
                        官方相册
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-sm-3" th:each="pic:${showreels}">
                    <img class="img-responsive" th:src="|/${lPath}${lecturer.id}/${pic}|" alt="">
                </div>
            </div>

            <!-- 该机构其它课程 -->
            <div class="row">
                <div class="panel">
                    <div class="panel-body">
                        该机构其它课程
                    </div>
                </div>
            </div>
            <div class="row">

                <div class="col-sm-3" th:each="oc:${otherCourses}">
                    <img class="img-responsive" th:src="|/${lPath}${oc.id}/${oc.picUrl}|" alt="">
                    <p th:text="${oc.name}"></p>
                    <p th:text="${oc.level}"></p>
                    <p th:utext="| ￥ <s class='text-danger'>${oc.originalPrice}</s> &nbsp;&nbsp;&nbsp;&nbsp;￥${oc.price}|"></p>

                </div>
            </div>
        </div>

        <div class="col-sm-3">
            <div class="panel" style="height: 300px;background: #dddddd;">
                广告区
            </div>
        </div>
    </div>
</div>
<div class="container">
    <div class="row">
        课程评价
        <button type="button" class="btn btn-default btn-sm">
            <span class="glyphicon glyphicon-comment"></span> <a href="/phisoa/organization/comment/add">我要评价</a>
        </button>
    </div>
    <div class="row">
        <div class="well" th:text="|全部评价(1000) 好评(600) 中评(200) 差评(200)|"></div>
    </div>
    <div class="row" th:each="c:${comments}">
        <div class="col-sm-1">
            <img class="img-responsive" th:src="|/${uPath}${c.user.id}/${c.user.headImg}|" alt="">
        </div>
        <div class="col-sm-9">
            <div class="row" th:text="${c.user.name}"></div>
            <div class="row" th:text="${c.comment}"></div>
            <div class="row">
                <div class="col-sm-3" th:each="pic:${c.getParsedPictures()}">
                    <img class="img-responsive" th:src="|/${ccPath}${c.courseId}/${pic}|" alt="">
                </div>
            </div>
        </div>
        <div class="col-sm-2">待定六边形</div>
    </div>
</div>
</body>
</html>